<template>
  <div class="app-car-container">
    <CustomContent>
      <template v-slot:body>
        <el-form label-width="100px" label-position="right">

          <el-col :sm="24" :md="24" :lg="23">
            <MmvTitle title="客户信息"></MmvTitle>
          </el-col>
          <MemberDetail :detail="detail"  @refreshMemberInfo="getData"></MemberDetail>

          <el-row :gutter="15">
            <el-col :sm="24" :md="24" :lg="23">
              <MmvTitle title="客户优惠券"></MmvTitle>
            </el-col>
            <el-col :sm="24" :md="24" :lg="23" class="table-margin">
              <el-table v-loading="loading3" :data="memberCouponList" :height="heightCoupon" border>
                <el-table-column label="领取日期" align="center" prop="receiveTime" min-width="150"
                  show-overflow-tooltip></el-table-column>
                <el-table-column label="优惠券名称" align="center" prop="couponName" min-width="200"
                  show-overflow-tooltip></el-table-column>
                <el-table-column label="优惠券类型" align="center" prop="couponCategory" min-width="100" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.coupon_type" :value="scope.row.couponCategory" />
                  </template>
                </el-table-column>
                <el-table-column label="优惠券信息" align="center" prop="couponInfo" min-width="100"
                  show-overflow-tooltip></el-table-column>
                <el-table-column label="优惠券状态" align="center" prop="memberCouponStatus" min-width="100"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.coupon_memberCouponStatus" :value="scope.row.memberCouponStatus" />
                  </template>
                </el-table-column>
                <el-table-column label="领取方式" align="center" prop="receiveMethod" min-width="100" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.receive_method" :value="scope.row.receiveMethod" />
                  </template>
                </el-table-column>
                <el-table-column label="支持门店" align="center" prop="couponMemberType" min-width="200"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span v-if="scope.row.couponMemberType == 1">通用券</span>
                    <span v-if="scope.row.couponMemberType == 2 && scope.row.storeName">
                      适用门店:
                      <span v-for="(item, index) in scope.row.storeName.split(',')" :key="index">
                        {{ item }}
                      </span>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="有效期" align="center" prop="couponValidity" min-width="100"
                  show-overflow-tooltip></el-table-column>
                <!--                <el-table-column-->
                <!--                  label="使用时间"-->
                <!--                  align="center"-->
                <!--                  prop="useTime"-->
                <!--                  min-width="100"-->
                <!--                  show-overflow-tooltip-->
                <!--                ></el-table-column>-->
                <el-table-column label="使用记录" align="center" prop="useType" min-width="300" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span v-if="scope.row.useType == 1">
                      线下扫码核销 &nbsp;&nbsp;&nbsp;使用时间：{{
                        scope.row.useTime
                      }}
                    </span>
                    <span v-else-if="scope.row.useType == 2">
                      使用业务类型:<dict-tag :options="dict.type.sys_business" :value="scope.row.bizClassification" />
                      使用时间：{{ scope.row.useTime }}
                      业务订单编号：{{ scope.row.orderNo }}
                    </span>
                    <span v-else> -- </span>
                  </template>
                </el-table-column>
              </el-table>
              <pagination v-show="coupontotal > 0" :total="coupontotal" :autoScroll="false"
                :page.sync="couponqueryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getMemberCouponList" />
            </el-col>
          </el-row>

          <el-row :gutter="15">
            <el-col :sm="24" :md="24" :lg="23">
              <MmvTitle title="客户历史订单"></MmvTitle>
            </el-col>
            <el-col :sm="24" :md="24" :lg="23" class="table-margin">
              <el-descriptions :column="4" :labelStyle="{ width: '120px', textAlign: 'center' }"
                :contentStyle="{ width: '120px', textAlign: 'center' }" direction="vertical" border>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">订单总数</template>
                  {{ orderSum || 0 }} 笔
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">订单总金额</template>
                  {{ amountSum || 0 }} 元
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">未完成总数</template>
                  {{ noOrderCount || 0 }} 笔
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">已完成总数</template>
                  {{ orderCount || 0 }} 笔
                </el-descriptions-item>
              </el-descriptions>
            </el-col>




            <el-col :sm="24" :md="24" :lg="23" class="table-margin">
              <el-table v-loading="loading2" :data="orderList" border>
                <el-table-column label="订单日期" align="center" prop="createTime" min-width="220" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.createTime }}
                    <span style="color: red">{{ scope.row.daysInfo }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="订单号" align="center" prop="orderNo" min-width="200" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-button type="text" @click="orderInfo(scope.row)">{{
                      scope.row.orderNo
                    }}
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column label="订单类型" align="center" prop="orderNo" min-width="100" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.sys_business" :value="scope.row.orderType" />
                  </template>
                </el-table-column>
                <el-table-column label="预定车型" align="center" prop="modelName" min-width="100" show-overflow-tooltip />
                <el-table-column label="取还信息" align="left" prop="memberName" min-width="150" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.rentalType }} 租期
                    {{ scope.row.tenancy }} 取：{{ scope.row.takeStore }}
                    {{ scope.row.startTime }} 还：{{ scope.row.alsoStore }}
                    {{ scope.row.endTime }}
                  </template>
                </el-table-column>
                <el-table-column label="押金方式" align="center" prop="depositPayType" min-width="100" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.depositPayType == 1 ? '线上' : '线下' }}
                  </template>
                </el-table-column>
                <el-table-column label="订单来源" align="center" prop="orderSource" min-width="120" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.sys_order_source" :value="scope.row.orderSource" />
                  </template>
                </el-table-column>
                <el-table-column label="订单状态" align="center" prop="orderStatusStr" min-width="100" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span v-if="scope.row.orderStatusStr == '完成'">{{
                      scope.row.orderStatusStr
                    }}</span>
                    <span v-if="scope.row.orderStatusStr != '完成'" style="color: red">{{ scope.row.orderStatusStr }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="订单金额(元)" align="center" prop="rent" min-width="120" show-overflow-tooltip>
                  <template slot-scope="scope">
                    ¥{{ scope.row.rent }}
                  </template>
                </el-table-column>
              </el-table>
              <pagination v-show="total > 0" :total="total" :autoScroll="false" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getOrderList" />
            </el-col>
          </el-row>

          <!-- 征信记录 -->
<!--          <el-col :sm="24" :md="24" :lg="23">-->
<!--            <MmvTitle title="征信查询记录"></MmvTitle>-->
<!--          </el-col>-->
<!--          <memberCreditRecord ref="creditRecord" :memberNo="$route.query.memberNo"></memberCreditRecord>-->
        </el-form>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="info" plain @click.native="close">取消</el-button>
        </div>
      </template>
    </CustomContent>

    <el-dialog title="订单详情" :visible.sync="showdetail" width="1000px" destroy-on-close append-to-body>
      <MmvDetail ref="MmvDetail" v-if="showdetail" :orderNo="nowOrderNo"></MmvDetail>
      <div slot="footer">
        <el-button @click="showdetail = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="订单详情" :visible.sync="showdetailL" width="1000px" destroy-on-close append-to-body>
      <MmvLDetail ref="MmvLDetail" v-if="showdetailL" :orderNo="nowOrderNo"></MmvLDetail>
      <div slot="footer">
        <el-button @click="showdetailL = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="订单详情" :visible.sync="showdetailH" width="1000px" destroy-on-close append-to-body>
      <MmvHDetail ref="MmvHDetail" v-if="showdetailH" :orderNo="nowOrderNo"></MmvHDetail>
      <div slot="footer">
        <el-button @click="showdetailH = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import MmvAnchor from '@/components/MmvUI/MmvAnchor.vue'
import MmvDetail from '@/views/order/orderBasic/detail.vue'
import MmvLDetail from '@/views/longOrder/basic/detail.vue'
import MmvHDetail from '@/views/luxuryOrder/detail.vue'
import CustomContent from '@/components/custom/content.vue'
import MemberDetail from '@/views/components/memberDetail.vue'
import {
  getBasic,
  memberOrderList,
} from '@/api/member/member'
import { listMemberCoupon } from '@/api/marketingManagement/memberCoupon'
import Template from "@/views/system/template";
import memberCreditRecord from '@/views/components/memberCreditRecord.vue';
export default {
  components: {
    Template,
    MmvTitle,
    MmvAnchor,
    MmvDetail,
    MmvLDetail,
    MmvHDetail,
    CustomContent,
    MemberDetail,
    memberCreditRecord
  },
  dicts: [
    'label_classify',
    'sys_order_source',
    'sys_business',
    'coupon_type',
    'coupon_memberCouponStatus',
    'receive_method',
    'document_type',
  ],
  filters: {
    memberType(val) {
      return (
        {
          1: '企业',
          2: '个人',
        }[Number(val)] || '--'
      )
    },
    memberSource(val) {
      return (
        {
          1: '搜索',
          2: '分享',
          3: '扫码',
          4: '手动录入',
        }[Number(val)] || '--'
      )
    },
  },
  props: ['detailid'],
  data() {
    return {
      loading: false,
      loading2: false,
      loading3: false,
      electronicContractEnable:0,
      detail: {
        memberNo: '', // 客户编号
        memberName: '', // 客户名称
        memberType: '', // 客户类型（1.企业 2.个人）
        vxName: '', // 微信名称
        vxUrl: '', // 微信图像
        lastLoginTime: '', // 最后登陆时间
        memberSource: '', // 客户来源（1.搜索 2.分享 3.扫码 4.手动录入）
        contactPhone: '', // 	手机号
        historyPhone: '', // 	历史手机号
        contactAddress: '', // 联系地址
        memberStatus: '', // 客户状态（1.正常 2.黑名单）
        censorStatus: '', // 是否认证(1.未认证,2.已认证)
        inviterName: '', // 上级邀请人
        createTime: '', // 创建时间
        tenantName: '', // 所属租户
        documentType: 0, // 证件类型
        cardId: '', // 证件编号
        cardValidity: '', // 证件有效期
        drivingId: '', // 驾驶证编号
        drivingType: '', // 驾驶证类型
        drivingValidity: '', // 驾驶证有效期
        integral: '', // 返回数据
        createBy: '', // 创建人
        remark: '', // 备注
        jsUrl: '', // 驾驶证图片
        sfUrl: '', // 证件图片
        businessLicenseUrl: '', // 营业执照
        enterpriseName: '', // 企业名称(客户类型为企业必填)
        creditCode: '', // 统一社会信用代码(客户类型为企业必填)
        enterpriseAdderss: '', // 企业地址(客户类型为企业必填)
        labelClassify: [],
        idCardUrl: '',
        idCardBackUrl: '',
        driverUrl: '',
        driverBackUrl: '',
      },

      orderSum: 0,
      amountSum: 0,
      noOrderCount: 0,
      orderCount: 0,
      srcList: [],
      orderList: [],

      memberCouponList: [],
      heightCoupon: '100px',


      // 总条数
      total: 0,
      coupontotal: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        memberNo: null,
      },
      couponqueryParams: {
        pageNum: 1,
        pageSize: 10,
        memberNo: null,
      },
      showdetail: false,
      nowOrderNo: null,
      showdetailL: false,
      showdetailH: false,
    }
  },
  mounted() {
    this.getData()
    this.queryParams.memberNo = this.$route.query.memberNo
    this.electronicContractEnable = this.$route.query.electronicContractEnable
    this.couponqueryParams.memberNo = this.$route.query.memberNo
    this.getOrderList()
    this.getMemberCouponList()
  },
  methods: {
    getMemberCouponList() {
      this.loading3 = true
      listMemberCoupon(this.couponqueryParams).then((response) => {
        this.memberCouponList = response.rows
        this.coupontotal = response.total
        this.loading3 = false
        if (this.memberCouponList.length > 5) {
          this.heightCoupon = '500px'
        } else {
          this.heightCoupon =
            this.memberCouponList.length == 0
              ? 100 + 'px'
              : this.memberCouponList.length * 130 + 'px'
        }
      })
    },
    // 取消按钮
    goBack() {
      this.$router.go(-1) // 返回
      //关闭子页面
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      )
      this.$router.push(
        this.$store.state.tagsView.visitedViews[
          this.$store.state.tagsView.visitedViews.length - 1
        ].path
      )
    },
    orderInfo(row) {
      //订单详情
      switch (row.orderType) {
        case 1: //短租
          // this.nowOrderNo = row.orderNo
          // this.showdetail = true
          this.nowOrderNo = row.orderNo
          this.$router.push({
            path: '/orderBasic/detail',
            query: { orderNo: row.orderNo }
          })
          break
        case 2: //长租
          this.nowOrderNo = row.orderNo
          this.showdetailL = true
          break
        case 3: //豪车
          this.nowOrderNo = row.orderNo
          this.showdetailH = true
          break
        default:
          break
      }
    },
    vbs(val) {
      this.srcList = []
      this.srcList.push(this.getImgUrl(val))
    },
    getOrderList() {
      //客户订单
      this.loading2 = true
      memberOrderList(this.queryParams).then((response) => {
        this.orderList = response.rows
        this.total = response.total
        this.loading2 = false
      })
    },
    close() {
      // 关闭页面
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    },
    getData() {
      this.loading = true
      getBasic(this.$route.query.memberNo)
        .then((resopnse) => {

          this.orderSum = resopnse.data.orderSum
          this.amountSum = resopnse.data.amountSum
          this.noOrderCount = resopnse.data.noOrderCount
          this.orderCount = resopnse.data.orderCount

          // this.detail.memberNo = resopnse.data.memberNo // 客户编号
          // this.detail.memberName = resopnse.data.memberName // 客户名称
          // this.detail.memberType = resopnse.data.memberType // 客户类型（1.企业 2.个人）
          // this.detail.vxName = resopnse.data.vxName // 微信名称
          // this.detail.vxUrl = resopnse.data.vxUrl // 微信图像
          // this.detail.lastLoginTime = resopnse.data.lastLoginTime // 最后登陆时间
          // this.detail.memberSource = resopnse.data.memberSource // 客户来源（1.搜索 2.分享 3.扫码 4.手动录入）
          // this.detail.contactPhone = resopnse.data.contactPhone // 	手机号
          // this.detail.historyPhone = resopnse.data.historyPhone // 	历史手机号
          // this.detail.contactAddress = resopnse.data.contactAddress // 联系地址
          // this.detail.memberStatus = resopnse.data.memberStatus // 客户状态（1.正常 2.黑名单）
          // this.detail.censorStatus = resopnse.data.censorStatus // 是否认证(1.未认证,2.已认证)
          // this.detail.inviterName = resopnse.data.inviterName // 上级邀请人
          // this.detail.createTime = resopnse.data.createTime // 创建时间
          // this.detail.tenantName = resopnse.data.tenantName // 所属租户
          // this.detail.cardId = resopnse.data.cardId // 证件编号
          // this.detail.documentType = resopnse.data.documentType // 证件类型
          // this.detail.cardValidity = resopnse.data.cardValidity // 证件有效期
          // this.detail.drivingId = resopnse.data.drivingId // 驾驶证编号
          // this.detail.drivingType = resopnse.data.drivingType // 驾驶证类型
          // this.detail.drivingValidity = resopnse.data.drivingValidity // 驾驶证有效期
          // this.detail.integral = resopnse.data.integral // 返回数据
          // this.detail.createBy = resopnse.data.createBy // 创建人
          // this.detail.remark = resopnse.data.remark // 备注
          // // this.detail.jsUrl = resopnse.data.jsUrl // 驾驶证图片
          // // this.detail.sfUrl = resopnse.data.sfUrl // 证件图片
          // this.detail.labelClassify = resopnse.data.labelClassify.split(',')
          // this.detail.enterpriseName = resopnse.data.enterpriseName // 企业名称
          // this.detail.creditCode = resopnse.data.creditCode // 统一社会信用代码
          // this.detail.enterpriseAdderss = resopnse.data.enterpriseAdderss // 企业地址
          // this.detail.businessLicenseUrl = resopnse.data.businessLicenseUrl // 营业执照
          //
          // this.detail.idCardUrl = resopnse.data.idCardUrl // 身份证正面
          // this.detail.idCardBackUrl = resopnse.data.idCardBackUrl // 身份证反面
          // this.detail.driverUrl = resopnse.data.driverUrl // 驾驶证正面
          // this.detail.driverBackUrl = resopnse.data.driverBackUrl // 驾驶证反面

          this.detail = resopnse.data;
          this.detail.labelClassify = resopnse.data.labelClassify.split(',');


          this.loading = false
        })
        .catch((err) => console.log(err))
    },
  },
}
</script>
<style>
.my-content {
  width: 300px !important;
}
</style>
